<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>双色表格</title>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script src="js/jquery.pack.js" type="text/javascript"></script>
		<!--将jQuery引用进来-->
		<script type="text/javascript"><!--
		$(document).ready(function(){  //这个就是传说的ready
        $(".stripe tr").mouseover(function(){  
                //如果鼠标移到class为stripe的表格的tr上时，执行函数
                $(this).addClass("over");}).mouseout(function(){ 
                                //给这行添加class值为over，并且当鼠标一出该行时执行函数
                $(this).removeClass("over");})  //移除该行的class
        $(".stripe tr:even").addClass("alt");
                //给class为stripe的表格的偶数行添加class值为alt
    /*            
	$(".stripe tr").mouseover(function(){
		$(this).addClass("over");})
	$(".stripe tr").mouseout(function(){
		$(this).removeClass("over");})
	*///注意原来这样写，但是我们的动作是针对同一个对象，所以实际用层叠应用
});
</script>
		<style>
th {
        background:#0066FF;
        color:#FFFFFF;
        line-height:20px;
        height:30px;
}
 
td {
        padding:6px 11px;
        border-bottom:1px solid #95bce2;
        vertical-align:top;
        text-align:center;
}
 
td * {
        padding:6px 11px;
}
 
tr.alt td {
        background:#ecf6fc;  /*这行将给所有的tr加上背景色*/
}
 
tr.over td {
        background:#bcd4ec;  /*这个将是鼠标高亮行的背景色*/
}
 
</style>
	</head>

	<body>
		<table class="stripe" width="450" border="0" cellspacing="0"
			cellpadding="0">
			<!--用class="stripe"来标识需要使用该效果的表格-->
			<thead>
				<tr>
					<th>
						姓名
					</th>
					<th>
						年龄
					</th>
					<th>
						QQ
					</th>
					<th>
						Email
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						邓国梁
					</td>
					<td>
						23
					</td>
					<td>
						31540205
					</td>
					<td>
						gl.deng@gmail.com
					</td>
				</tr>
				<tr>
					<td>
						邓国梁
					</td>
					<td>
						23
					</td>
					<td>
						31540205
					</td>
					<td>
						gl.deng@gmail.com
					</td>
				</tr>
				<tr>
					<td>
						邓国梁
					</td>
					<td>
						23
					</td>
					<td>
						31540205
					</td>
					<td>
						gl.deng@gmail.com
					</td>
				</tr>
				<tr>
					<td>
						邓国梁
					</td>
					<td>
						23
					</td>
					<td>
						31540205
					</td>
					<td>
						gl.deng@gmail.com
					</td>
				</tr>
				<tr>
					<td>
						邓国梁
					</td>
					<td>
						23
					</td>
					<td>
						31540205
					</td>
					<td>
						gl.deng@gmail.com
					</td>
				</tr>
				<tr>
					<td>
						邓国梁
					</td>
					<td>
						23
					</td>
					<td>
						31540205
					</td>
					<td>
						gl.deng@gmail.com
					</td>
				</tr>
			</tbody>
		</table>
		<p> 
			PS: 飘飘说我的table没有&lt;thead&gt; , 我知错了... 
		</p>
	</body>
</html>
